<!--
 * @Author: yao
 * @Date: 2024-11-18 08:36:46
 * @LastEditTime: 2024-11-19 16:49:54
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web\src\Layouts\MenuContent.vue
-->
<template>
  <div class="Layout_menu">
    <div @click="switchMenu" class="menu_switch"></div>
    <div class="menu_content">
      <div class="side_menu">
        <ul>
          <li class="menu_item" :class="{ 'menu_item_select': currentMenu.isSearch }"
            @click="clickMenu({ isSearch: true, id: -1 })">
            <a><i class="pi pi-search" />
              <div>查找</div>
            </a>

          </li>
          <li class="menu_item" :class="{ 'menu_item_select': currentMenu.isFav }"
            @click="clickMenu({ isFav: true, id: -2 })">
            <a>
              <i class="pi pi-star" />
              <div>收藏</div>
            </a>
          </li>
          <li class="menu_item">
            <a>
              <i class="pi pi-home"></i>
              <div>主页</div>
            </a>
          </li>
          <li class="menu_item" :class="{ 'menu_item_select': menu.meta.id === currentMenu?.meta?.id }"
            v-for="menu in userStore.menus" :key="menu.meta.id" @click="clickMenu(menu)">
            <a><i v-if="menu.meta.icon" :class="['pi', menu.meta.icon]"></i><i v-else class="pi pi-stop" />
              <div>{{ menu.meta.title }}</div>
            </a>
          </li>
        </ul>
      </div>
      <div class="right_menu" :class="{ 'right_menu_show': isShowMenu }">
        <ul>
          <li v-if="currentMenu.isSearch" style="padding: 0 6px;">
            <IconField>
              <InputIcon class="pi pi-search" />
              <InputText style=" border-top: none; border-left: none; border-right: none;border-radius: 0"
                v-model="value1" placeholder="输入要查找的菜单" fluid />
            </IconField>
          </li>
          <SubMenu :menuData="currentMenu.children"></SubMenu>
        </ul>
      </div>
    </div>
    <MenuFooter></MenuFooter>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user';
import MenuFooter from './MenuFooter.vue';

import { ref } from 'vue';
import SubMenu from './SubMenu.vue';
const isShowMenu = ref(false)
const emits = defineEmits(["switch"]);
const switchMenu = (val) => {
  isShowMenu.value = !isShowMenu.value
}

const userStore = useUserStore()

const currentMenu: any = ref({})


const clickMenu = (menu: any) => {
  currentMenu.value = menu
  if ((menu.children && menu.children.length > 0) || menu.isSearch || menu.isFav) {
    isShowMenu.value = true
  }
  emits('switch', menu.children && menu.children.length > 0)
}



</script>
<style lang="scss" scoped>
.Layout_menu {
  width: auto;
  box-sizing: border-box;
  position: relative;
  background-color: var(--card-bg);
  z-index: 999;
  flex-direction: column;
  height: 100%;
  display: flex;
  padding-bottom: 12px;

  .menu_switch {
    position: absolute;
    width: 16px;
    height: 26px;
    cursor: pointer;
    background: white;
    top: 50%;
    right: -16px;
  }

  .menu_content {
    display: flex;
    height: 100%;

    .side_menu {
      z-index: 999;
      user-select: none;
      box-sizing: border-box;
      overflow-y: auto;
      list-style-type: none;
      list-style: none;
      width: 70px;
      // padding-left: 6px;

      .menu_item {
        --p-icon-size: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        outline: none;
        width: 60px;
        height: 60px;
        margin: 0 auto .35rem;
        padding: 0.55rem;
        font-size: 14px;
        border-radius: 10px;
        transition: background-color .2s;
        // border-top-left-radius: 9999px;
      }

      .menu_item:hover {
        background-color: var(--p-navigation-item-focus-background);
        color: var(--p-navigation-item-focus-color);
      }

      .menu_item_select {
        font-weight: 700;
        color: var(--p-navigation-item-active-color);
        background-color: var(--p-navigation-item-active-background);
      }
    }

    .right_menu {
      display: flex;
      flex-direction: column;
      width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: width 0.2s ease-in-out;
      height: 100%;


    }

    .right_menu_show {
      width: 190px;
      min-height: 400px;
      border-left: 1px solid var(--surface-border);
      transition: width 0.2s ease-in-out;
    }
  }
}
</style>